<template>
	<view class="factory-content">
		<headassy title="仓库列表" :isSearch="false" :isTab="false"></headassy>
		<view class="nav-status text-orange fsize14">
			当前状态有{{count}}个仓库
		</view>
		<scroll-view>
			<view class="card-list">
				<view class="card mt-5" v-for="item in factorylist" :key="item.id">
					<view class="top u-flex-between">
						<view class="left u-flex">
							<view class="text-info ">
								{{item.name ? item.name : ''}}
							</view>
						</view>

					</view>
					<view class="center">
						<view class="text u-flex-between">
							<view>仓库编码:</view>
							<view>{{item.code ? item.code : ''}}</view>
						</view>
						<view class="text u-flex-between">
							<view>联系人:</view>
							<view>{{item.contact ? item.contact : ''}}</view>
						</view>
						<view class="text u-flex-between">
							<view>仓库位置:</view>
							<view>{{item.position ? item.position : ''}}</view>
						</view>
						<view class="text u-flex-between">
							<view>型号数量:</view>
							<view>{{item.modelNum ? item.modelNum : ''}}</view>
						</view>
						<view class="text u-flex-between">
							<view>规格数量:</view>
							<view>{{item.specNum ? item.specNum : ''}}</view>
						</view>
						<view class="text u-flex-between">
							<view>存储数量:</view>
							<view>{{item.storageNum ? item.storageNum : ''}}</view>
						</view>
						<view class="text u-flex-between">
							<view>最后更新时间:</view>
							<view>{{item.updateTime ? item.updateTime : ''}}</view>
						</view>
					</view>

				</view>
			</view>
			<view class="example-body">
				<uni-load-more :status="status" :content-text="contentText"/>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				count: '',
				
				page: {
					pageNum: 1,
					pageSize: 20,
				},
				params: {
					custAccId: '',
				},
				newParams: [],
				factorylist: [],
				system: uni.getSystemInfoSync(),
				
				status: 'loading',		//上拉加载
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			};
		},
		onLoad() {
			this.params.custAccId = uni.getStorageSync('custAccid')
			this.get_FactoryList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		// 触底监听
		onReachBottom() {
			console.log('触底,判断数据余量,更新数据');
			console.log('列表分组总数:'+Math.ceil(this.count / 20),'当前列表:'+this.page.pageNum);
			if(this.page.pageNum < Math.ceil(this.count / 20)) {
				this.status = 'loading';
				this.page.pageNum++;
				this.get_FactoryList('refresh');
			}else {
				this.status = 'noMore';
				// this.$alertTost('到底了~')
			}
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear();
				setTimeout(()=>{
					uni.stopPullDownRefresh();
				}, 1500);
				this.page.pageNum = 1;
				this.get_FactoryList();
			},
			async get_FactoryList(type) {
				const res = await uni.$api.factory.getFactoryList({
					...this.params,
					...this.page
				})
				if(type == 'refresh') {
					this.factorylist.push(...res.data);
				}else {
					this.factorylist = [];
					this.factorylist = res.data
				}
				this.count = res.count;
				this.status = 'noMore';
			},
		},

	}
</script>

<style lang="scss">
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	
	.factory-content {
		// height: 100vh;
		background-color: $uni-bg-color-grey;

		.u-nav-slot {
			display: flex;
			align-items: center;
		}

		.tabs {
			background-color: #fff;
			font-size: 28rpx;
			width: 100%;
		}

		.nav-status {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;	
		}

		
	}
	
	.card-list {
		background: $uni-bg-color-grey;
		padding: 0 28rpx;
	
		.card {
			padding: 28rpx 32rpx;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 28rpx;
	
			.top {
				border-bottom: solid 1px #f5f5f5;
				padding-bottom: 10px;
	
				.left {
					.text-info {
						// font-size: 28rpx;
						font-weight: 700;
					}
				}
			}
	
			.center {
	
				.text {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 28rpx;
					color: gray;
					
					view:nth-child(1) {
						width: 200rpx;
						padding: 6rpx 0;
					}
					view:nth-child(2) {
						flex: 1;
						padding-left: 14rpx;
					}
				}
			}
	
			.down {
				border-top: solid 1px #f5f5f5;
				padding-top: 12px;
			}
		}
	}
</style>